<template>
  <!-- 列表 -->

  <div class="resource-container">
    <div class="resource-aside" v-if="classList.length">
      <CollapseSelect
        v-model="curSelected"
        v-model:collapse="curCollapse"
        disableTitleSelected
        showSearch
        :list="classList"
        :selectedFormat="selectedFormat"
      />
    </div>
    <div class="resource-content">
      <el-container>
        <el-header>
          <div class="resource-header">
            <view class="flex items-center">
              <el-form :model="queryParams" class="-mb-15px">
                <el-form-item label="日期" prop="queryDate">
                  <el-date-picker
                    v-model="queryParams.queryDate"
                    value-format="YYYYMMDD"
                    type="date"
                    :default-time="new Date()"
                  />
                </el-form-item>
              </el-form>
            </view>
            <view> <span class="c-gray">班级人数：</span>{{attendanceStatsRef?.baseData?.totalStudents}}人 </view>
          </div>
        </el-header>
        <el-main v-loading="loading">
          <div class="file-content">
            <attendanceStats ref="attendanceStatsRef" :classId="curSelected" :queryDate="queryParams.queryDate" />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ClassesApi } from '@/api/school/classes'
import attendanceStats from './components/attendanceStats.vue'
import { formatDate } from '@/utils/formatTime'
/** 周计划 列表 */
defineOptions({ name: 'SchoolWeeklyPlan' })

const queryParams = reactive({
  queryDate: formatDate(new Date(), 'YYYYMMDD')
})
const loading = ref(false) // 列表的加载中
const classList: any = ref([])
const curSelected: any = ref('')
const curCollapse = ref(['0', '1'])
const attendanceStatsRef = ref()
const getClassList = async (notInit?: boolean) => {
  loading.value = true
  try {
    const data = (await ClassesApi.getClassesSimpleList()) || []
    const schoolCodeMap = getStrDictOptions(DICT_TYPE.SCHOOL_CODE)
    const baseObject = {}
    data.forEach((item) => {
      const schoolCode = item.schoolCode
      if (!baseObject[schoolCode]) {
        const findShoolName: any = schoolCodeMap.find((item) => {
          return item.value === schoolCode
        })
        baseObject[schoolCode] = {
          label: findShoolName.label,
          children: []
        }
      }
      const children = baseObject[schoolCode].children
      children.push({
        ...item,
        label: item.className
      })
      children.reverse()
    })
    classList.value = Object.values(baseObject)
    if (!notInit) curSelected.value = classList.value[0].children[0].id
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const selectedFormat = (item) => {
  return item.id
}

/** 初始化 **/
onMounted(() => {
  getClassList()
})
</script>

<style lang="scss" scoped>
.resource-container {
  display: flex;
  min-height: $content-height;

  .resource-aside {
    width: 200px;
    min-height: $content-height;
    background-color: #fff;
    border-right: solid 1px var(--el-menu-border-color);
  }

  .resource-content {
    height: $content-height;
    // background-color: #fff;
    flex: 1;
  }

  .file-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    font-size: unset;
    line-height: unset;
    flex-wrap: wrap;
    gap: 20px 30px;
  }

  .resource-header {
    display: flex;
    height: 48px;
    // border-bottom: 1px solid #e9e9e9;
    align-items: center;
    justify-content: space-between;
  }

  :deep() {
    .el-container {
      height: 100%;
    }

    .el-header {
      height: auto;
      background-color: #fff;
    }

    .el-empty {
      margin: 0 auto;
    }

    .el-collapse-item__header {
      padding-left: 16px;
    }

    .el-card {
      background-color: none;
    }
  }
}
</style>
